<template>
  <div class='app'>
    <ListCom @showPop="showPop"></ListCom>
    <DetailCom v-if="showPopup" @noPop="noPop" :item="item"></DetailCom>
  </div>
</template>                                                              
<script>
import DetailCom from './components/DetailCom.vue';
import ListCom from './components/ListCom.vue';

export default {
  components: {
    ListCom,
    DetailCom
  },
  name: 'App',
  data() {
    return {
      showPopup: false,
      item: {}
    }
  },
  methods: {
    showPop(event) {
      this.showPopup = true
      this.item = event
    },
    noPop(event) {
      this.showPopup = event
    }
  },
}
</script>
<style scoped></style>